<template>
  <a-grid :cols="25" :row-gap="16" class="panel">
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 5 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img alt="avatar" :src="imageData1" />
        </a-avatar>
        <!--        <a-statistic-->
        <!--          title="待审"-->
        <!--          :value="renderData.firstPendNum"-->

        <!--          :value-from="0"-->
        <!--          animation-->
        <!--          show-group-separator-->
        <!--        >-->
        <!--        </a-statistic>-->
      </a-space>
    </a-grid-item>
    <!--    <a-grid-item-->
    <!--      class="panel-col"-->
    <!--      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 5 }"-->
    <!--    >-->
    <!--      <a-space>-->
    <!--        <a-avatar :size="54" class="col-avatar">-->
    <!--          <img-->
    <!--            alt="avatar"-->
    <!--            :src="imageData2"-->
    <!--          />-->
    <!--        </a-avatar>-->
    <!--        <a-statistic-->
    <!--          title="待终审"-->
    <!--          :value="renderData.finalPendNum"-->
    <!--          :value-from="0"-->
    <!--          animation-->
    <!--          show-group-separator-->
    <!--        >-->
    <!--        </a-statistic>-->
    <!--      </a-space>-->
    <!--    </a-grid-item>-->
    <!--    <a-grid-item-->
    <!--      class="panel-col"-->
    <!--      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 5 }"-->
    <!--    >-->
    <!--      <a-space>-->
    <!--        <a-avatar :size="54" class="col-avatar">-->
    <!--          <img-->
    <!--            alt="avatar"-->
    <!--            :src="imageData3"-->
    <!--          />-->
    <!--        </a-avatar>-->
    <!--        <a-statistic-->
    <!--          title="待审核合同"-->
    <!--          :value="renderData.contactPendNum"-->
    <!--          :value-from="0"-->
    <!--          animation-->
    <!--          show-group-separator-->
    <!--        >-->
    <!--        </a-statistic>-->
    <!--      </a-space>-->
    <!--    </a-grid-item>-->
    <!--    <a-grid-item-->
    <!--      class="panel-col"-->
    <!--      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 5 }"-->
    <!--      style="border-right: none"-->
    <!--    >-->
    <!--      <a-space>-->
    <!--        <a-avatar :size="54" class="col-avatar">-->
    <!--          <img-->
    <!--            alt="avatar"-->
    <!--            :src="imageData4"-->
    <!--          />-->
    <!--        </a-avatar>-->
    <!--        <a-statistic-->
    <!--          title="待审核中期考核"-->
    <!--          :value="renderData.midTermPendNum"-->
    <!--          :value-from="0"-->
    <!--          animation-->
    <!--        >-->
    <!--        </a-statistic>-->
    <!--      </a-space>-->
    <!--    </a-grid-item>-->
    <!--    <a-grid-item-->
    <!--      class="panel-col"-->
    <!--      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 5 }"-->
    <!--      style="border-right: none"-->
    <!--    >-->
    <!--      <a-space>-->
    <!--        <a-avatar :size="54" class="col-avatar">-->
    <!--          <img-->
    <!--            alt="avatar"-->
    <!--            :src="imageData4"-->
    <!--          />-->
    <!--        </a-avatar>-->
    <!--        <a-statistic-->
    <!--          title="待审核结题考核"-->
    <!--          :value="renderData.finalExaminePendNum"-->
    <!--          :value-from="0"-->
    <!--          animation-->
    <!--        >-->
    <!--        </a-statistic>-->
    <!--      </a-space>-->
    <!--    </a-grid-item>-->
    <a-grid-item :span="25">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid>
</template>

<script lang="ts" setup>
  import imageData1 from '@/assets/images/image-data1.png';
  import imageData2 from '@/assets/images/image-data2.png';
  import imageData3 from '@/assets/images/image-data3.png';
  import imageData4 from '@/assets/images/image-data4.png';
  import { PropType } from 'vue';
  import { DashBoadDataRecord, getDashBoadData } from '@/api/dashboardApi';

  const props = defineProps({
    renderData: {
      type: Object as PropType<DashBoadDataRecord>,
      default() {
        return {};
      },
    },
  });
</script>

<script lang="ts">
  export default {
    name: 'AdminDataPanel',
  };
</script>

<style lang="less" scoped>
  .banner {
    width: 100%;
    padding: 20px 20px 0 20px;
    background-color: var(--color-bg-2);
    border-radius: 4px 4px 0 0;
  }

  :deep(.arco-icon-home) {
    margin-right: 6px;
  }

  .arco-grid.panel {
    margin-bottom: 0;
    padding: 16px 20px 0 20px;
  }

  .panel-col {
    padding-left: 43px;
    border-right: 1px solid rgb(var(--gray-2));
  }

  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }

  .up-icon {
    color: rgb(var(--red-6));
  }

  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
    font-size: 12px;
  }

  :deep(.panel-border) {
    margin: 4px 0 0 0;
  }
</style>
